<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
</head>
<body>
    <div id="app">
        <big-brother></big-brother>
        <hr>
        <littel-brother></littel-brother>
    </div>


    <template id="big-brother">
        <div>
            <p>我是哥哥</p>
            <button @click="hitLittel">打弟弟</button>
        </div>
    </template>


    <template id="littel-brother">
        <div>
            <p>我是弟弟</p>
            <p v-if="crying">wuwuwuwwuuwu~~</p>
        </div>
    </template>

</body>
<script src="./base/vue.js"></script>

<script>

    //兄弟之间通信的话：viewmodel链  ref链   eventbus事件总线
    //父亲===>子组件   props获取父亲传递来的数据   数据只能由自身更改！
    //子组件==>父组件   1）父组件将更改自身数据的方法传递给子组件  2）事件触发与事件绑定的能力



    //创建一个空的Vue实例 event bus  事件总线  绑定事件与触发事件的过程
    //创建vue对象  var angel = new Vue();
    //B组件绑定一个自定义事件，第二个参数为需要执行的处理函数
    // angel.$on("事件名",this.cry)
    //A组件要执行B组件的事件名就可以让B组件自己去执行cry的方法。
    //angel.$emit("事件名")

    //1.创建一个公共的vue实例
    var angel = new Vue();
    Vue.component("big-brother",{
        template:"#big-brother",
        methods:{
            hitLittel(){
                //3.通过$emit触发$on绑定的事件函数
                angel.$emit("littel")
            }
        }
    })
    Vue.component("littel-brother",{
        template:"#littel-brother",
        data(){
            return {
                crying:false
            }
        },
        methods:{
            cry(){
                this.crying = true;
            }
        },
        mounted(){
           //2.通过$on绑定事件
           angel.$on("littel",this.cry)
        }
    })
   
    
    new Vue({
        el:"#app"
    })


</script>
</html>